import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// 创建一个HTML标签
function tag() {
  // 创建div元素(作为标签)
  var div = document.createElement('div');
  div.style.visibility = 'hidden';
  div.innerHTML = 'GDP:'+0;
  div.style.padding = '5px 10px';
  div.style.color = '#fff';
  div.style.fontSize = '16px';
  div.style.position = 'absolute';
  div.style.background = 'linear-gradient(180deg, rgba(255,137,28,0.91) 0%, rgba(250,99,52,0.77) 100%)';
  div.style.borderRadius = '5px';
  //div元素包装为CSS2模型对象CSS2DObject
  var label = new CSS2DObject(div);
  div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
  // 设置HTML元素标签在three.js世界坐标中位置
  // label.position.set(x, y, z);
  return label;//返回CSS2模型标签      
}

// 创建一个CSS2渲染器CSS2DRenderer
// var labelRenderer = new CSS2DRenderer();
// labelRenderer.setSize(930, 587);
// labelRenderer.domElement.style.position = 'absolute';
// // // 避免renderer.domElement影响HTMl标签定位，设置top为0px
// labelRenderer.domElement.style.top = '0px';
// // //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
// labelRenderer.domElement.style.pointerEvents = 'none';
// document.getElementById('map').appendChild(labelRenderer.domElement);

export {tag}